<template>
	<div>
	<city-header></city-header>
	<city-search></city-search>
	<city-list :citys="citys" :hotCitys="hotCitys"></city-list>
	<city-alphabet></city-alphabet>
    </div>
</template>

<script>
	import CityHeader from './components/Header'
	import CitySearch from './components/Search'
	import CityList from './components/List'
	import CityAlphabet from './components/Alphabet'
	//使用axios发送ajax请求
	import axios from 'axios'
	export default{
		name:'City',
		components:{
			CityHeader:CityHeader,
			CitySearch:CitySearch,
			CityList:CityList,
			CityAlphabet:CityAlphabet
		},
		data() {
			return {
				citys: [],
				hotCitys:[]
			}
		},
		methods:{
		 getCityInfo(){
			 axios.get('/api/city.json').then(this.getCityInfoSucc);
		 },
		 getCityInfoSucc(res){
			console.log(res); 
			var res =  res.data;
			if(res.ret && res.data){
				this.citys = res.data.citys;
				this.hotCitys = res.data.hotCitys;
			}
		 }
		},
		mounted() {
			this.getCityInfo();
		}
	}
</script>

<style lang="stylus" scoped>
</style>
